<!--
 * @Author: huyuhang
 * @Data: 
 * @LastEditors: huyuhang
 * @LastEditTime: 2024-04-29 10:30:49
 * @Description: 
-->
<template>
  <div>
    <AsyncTable :columns="columns" :fetchData="fetchData" ref="tableRef" />
  </div>
</template>
<script lang="tsx" setup>
import { collectTaskList } from '@/api/asset/taskManage/dataCollect'
import { useRouter } from 'vue-router'
import { Hide, View } from '@element-plus/icons-vue'
// import { collectTaskList } from './mock'
const router = useRouter()
const tableRef = ref()
onMounted(() => {})
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  renewComponent: {
    type: Number,
    default: 0
  }
})
const handleShowIp = (row) => {
  row.isShowIp = !row?.isShowIp
}
const columns = ref([
  {
    width: 60
  },
  {
    label: '数据源名称',
    prop: 'name'
  },
  {
    label: '资产IP:端口',
    render: ({ row }) => {
      return (
        <>
          <div style="display:flex;align-items:center;justify-content:space-between;">
            {row?.isShowIp ? (
              <span>{row.port ? row.ip + ':' + row.port : row.ip}</span>
            ) : (
              <span class="mt-6px" style="font-size:17px">
                ***********
              </span>
            )}
            {row?.isShowIp ? (
              <el-icon>
                <Hide onClick={() => handleShowIp(row)} />
              </el-icon>
            ) : (
              <el-icon>
                <View onClick={() => handleShowIp(row)} />
              </el-icon>
            )}
          </div>
        </>
      )
    }
  },
  {
    label: '资产类型',
    render({ row }) {
      return (
        <>
          <span>{row.assetTypeName || row.assetType}</span>
        </>
      )
    }
  },
  {
    label: '库名',
    prop: 'dbName'
  },
  {
    label: '归属机构',
    prop: 'department'
  },
  {
    label: '归属系统',
    prop: 'system'
  },
  {
    label: '扫描时间',
    prop: 'scanTime'
  },
  {
    label: '扫描状态',
    render: ({ row }) => (
      <span style={{ color: statusColor(row.statusName) }}>{row.statusName}</span>
    )
  },
  {
    label: '操作',
    render: ({ row }) => {
      return (
        <el-button
          link
          type="primary"
          size="small"
          onClick={() => {
            viewResult(row)
          }}
        >
          查看结果
        </el-button>
      )
    }
  }
])
const fetchData = async ({ page, pageSize }) => {
  if (props.id) {
    const { data, count } = await collectTaskList({ page, pageSize, taskId: props.id })
    return { data, count }
  }
}
const statusColor = (statu) =>
  statu === '成功' ? '#67C23A' : statu === '失败' ? '#F56C6C' : '#409EFF'
const viewResult = (row) => {
  router.push({
    path: `/asset/${row.datasourceType === 1 ? 'dataBaseResult' : 'fileServerResult'}`,
    query: {
      taskId: props.id,
      collectionAssetId: row.id,
      datasourceId: row.datasourceId,
      datasourceType: row.datasourceType
    }
  })
}
watch(
  () => props.renewComponent,
  () => {
    tableRef.value.fetchData()
  }
)
</script>
